<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="css/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container" style="padding-left:30px;">
    <div class="row">
      <p class="muted">Given a list = {[INPUT]}, show the sorting process step-by-step of the following algorithm. Each step is an exchange of 2 elements.</p>

      <h3>Insertion Sort</h3>
      <pre>
                1. current = 0
                2. loop (current &lt; count - 1)
                    1. smallest = current
                    2. walker = current + 1
                    3. loop (walker &lt; count)
                        1. if (data [walker].key &lt; data [smallest].key)
                            1. smallest = walker
                            2. walker = walker+1
                    4. swap(current, smallest)
                    5. current = current + 1
                End SelectionSort
            </pre>
    </div>

    <div class="array row">
      <p class="muted">Tap on 2 elements to swap them.</p><br />

      <div class="span1">
        Array:
      </div>

      <div class="item btn btn-info">
        13
      </div>

      <div class="item btn btn-info">
        27
      </div>

      <div class="item btn btn-info">
        8
      </div>

      <div class="item btn btn-info">
        3
      </div>

      <div class="item btn btn-info">
        21
      </div>

      <div class="item btn btn-info">
        17
      </div>

      <div class="item btn btn-info">
        28
      </div>

      <div class="btn btn-primary btnCheck" data-step="1">
        Check
      </div>

      <div class="btn btn-primary btnReset">
        Reset
      </div>
    </div>

    <div class="row alert alert-info result"></div>
  </div><script src="js/jquery-1.7.1.js" type="text/javascript">
</script><script src="js/bootstrap.js" type="text/javascript">
</script><script type="text/javascript">



  //<![CDATA[


        function init_array(l) {
            $('.array .item').text(function (index) {
                return l[index];
            });

            $('.array .item').attr('data-v', function (index) {
                return l[index];
            });
        }
        function swap(e1, e2, input_array){
            var temp = input_array[e1];
            input_array[e1] = input_array[e2];
            input_array[e2] = temp;
        }

        $(document).ready(function () {
            var input = '[INPUT]';
            var array = [];
            array[0] = input;
            var array_input = input.split('-');
            var input_array = array_input;
            for (var i = 0; i < array_input.length; i++)
                input_array[i] = parseInt(array_input[i]);
            
            count = input_array.length;
            if(count > 1){
                current = 1;
                while(current < count){
                    var temp = input_array[current];
                    var walker = current - 1;
                    while(walker >= 0 && temp < input_array[walker]){
                        input_array[walker + 1] = input_array[walker];
                        walker = walker - 1;
                    }
                    input_array[walker + 1] = temp;
                    var out = '';
                    for (var i = 0; i < input_array.length; i++)
                        out += input_array[i];
                    array[current] = out;
                    current = current + 1;
                }
            }



            var l = array[0].split('-');
            init_array(l);

            $('.array .item').click(function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    $('.array .item:not(.selected)').removeClass('availble');
                } else {
                    if ($(this).hasClass('availble')) {
                        var t = $('.array .selected').text();
                        $('.array .selected').text($(this).text());
                        $(this).text(t);
                        $('.array .item').removeClass('selected');
                        $('.array .item').removeClass('availble');
                    } else {
                        $(this).addClass('selected');
                        $('.array .item:not(.selected)').addClass('availble');
                    }
                }
            });

            $('.btnCheck').click(function () {
                var text = $('.array .item').text();
                var step = $(this).attr('data-step');
                if(step == current){
                  alert('done');
                  return;
                }
                if (text == array[step]) {
                    $('.result').append($('<div class="row" id="' + step + '"><div class="span1">Step ' + step + '<\/div><\/div>').append($('.array .item').clone()));
                    for (var i = 0; i < parseInt(step) + 2; i++) {
                        $('#' + step + ' .item:nth-child(' + i + ')').removeClass('btn-info');
                        $('#' + step + ' .item:nth-child(' + i + ')').addClass('btn-success');
                    }
                    $(this).attr('data-step', parseInt(step) + 1);
                    $('.array .item').attr('data-v', function () {
                        return $(this).text();
                    })
                } else {
                    alert('wrong');
                    $('.array .item').text(function () {
                        return $(this).attr('data-v');
                    });
                }
            });

            $('.btnReset').click(function () {
                $('.result').html('');
                $('.btnCheck').attr('data-step', 1);
                init_array(l);
            });

        });
  //]]>
  </script>
</body>
</html>
